{extend name="common/common" /}

{block name="style"}
<style type="text/css">
.layui-form-label{
	width: 90px;
}
.btn.btn-info{
	margin-top: 2px;
}
.configList{
	display: block;
	border: 2px solid #e7eaec;
	padding: 15px;
	height: 300px;
	overflow-y: scroll;
}
.badge{
	background-color: #ec4758;
	color: #FFF;
	padding:3px 4px;
	font-weight: 1;
	border-radius: 50%;
	cursor: pointer;
}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight col-md-10">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>添加产品</h5>
        </div>
        <div class="ibox-content">
			<form class="layui-form" action="" id="addForm">
				<div class="layui-form-item">
					<label class="layui-form-label label-required">产品名称</label>
					<div class="layui-input-inline">
						<input type="text" name="name" class="layui-input">
					</div>

					<label class="layui-form-label label-required">学期年限</label>
					<div class="layui-input-inline">
						<input type="text" name="age_limit" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label label-required">选择学校</label>
					<div class="layui-input-inline">
						<input type="text" name="school" readonly class="layui-input selectSchool school">
						<input type="hidden" name="school_id" class="school_id">
					</div>

					<label class="layui-form-label label-required">选择专业</label>
					<div class="layui-input-inline">
						<input type="text" name="major" readonly class="layui-input selectSchool major">
						<input type="hidden" name="major_id" class="major_id">
					</div>
				</div>

				<div class="layui-form-item">
					<!-- <label class="layui-form-label label-required">所属分类</label>
					<div class="layui-input-inline">
						<input type="text" name="c_name" readonly class="layui-input selectClassify">
						<input type="hidden" name="c_id" class="c_id">
					</div> -->

					<label class="layui-form-label label-required">学　　费</label>
					<div class="layui-input-inline">
						<input type="text" name="tuition" class="layui-input">
					</div>
				</div>
		        <hr class="layui-bg-orange">
		        <h5 style="padding: 5px;margin-bottom: 15px;">产品属性</h5>
		        <div class="row" style="margin-bottom: 15px;">
			        	<div id="attrbox"></div>
			        	<div class="layui-form-item">
				        	<label class="layui-form-label label-required">产品价格</label>
							<div class="layui-input-inline">
								<input type="number" class="layui-input price">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"></label>
							<button class="btn btn-info" type="button" id="addCfgPro">添加</button>
						</div>
					</div>
						<input type="hidden" name="attr_info" id="attr_info">
						<ul class="configList list-group"></ul>
				</div>
				<div class="layui-form-item">
			        <div class="col-sm-4 col-sm-offset-4">
			            <button class="btn btn-primary" type="submit">提交</button>
			            <button class="btn btn-danger" type="button">返回</button>
			        </div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="laycontent" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="tree"></ul>
</div>

<!-- <div class="layclassify" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="classifytree"></ul>
</div> -->
{/block}

{block name="script"}
<script>
$(function(){
	getTree();

	layui.use(['form'], function(){
  		var form = layui.form;
  	});

	$('.selectSchool').on('click',function(){
		selectSchoolBox = layer.open({
            type: 1,
            title: '请选择学校和专业',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['300px', '450px'], //宽高
            content: $(".laycontent")
        });
	});

	// $('.selectClassify').on('click',function(){
	// 	selectclassifyBox = layer.open({
    //         type: 1,
    //         title: '请选择所属分类',
    //         anim: 2,
    //         skin: 'layui-layer-molv', //加上边框
    //         area: ['300px', '450px'], //宽高
    //         content: $(".layclassify")
    //     });
	// });

	// 添加产品的自定义配置
	$('#addCfgPro').on('click',function(){
		var str = '';
		var str_show = '';
		var aAttr = $('#attrbox select');
		var aLab = $('#attrbox label');
		for(var i=0;i<aAttr.length;i++){
			var aOption = aAttr[i].getElementsByTagName('option');
			for(var j=0;j<aOption.length;j++){
				if(aOption[j].selected){
					var show = aOption[j].innerText;
				}
			}
			if(i<4 && aAttr[i].value == ''){
				layer.msg("产品属性前四项为必选项", {anim: 6});
				return false;
			}
			if(aAttr[i].value != ''){
				str += aAttr[i].value + ",";
				str_show += aLab[i].innerText + ":" + '<span style="color:#ed5565;font-weight:999;">'+ show + '</span>' + '，';
			}
		}
		if($('.price').val() != ''){
			str += "price:" + $('.price').val() + "^";
			str_show += "价格：" + '<span style="color:#ed5565;font-weight:999;">' + $('.price').val() + '</span>';
		}else{
			layer.msg("产品价格不能为空", {anim: 6});
			return false;
		}
		var html = $('.configList').html();
		html += '<li class="list-group-item">' + str_show;
		html += '<span class="badge" data-param="'+str+'">';
		html += '<i class="fa fa-remove"></i></span></li>';
		$('.configList').html(html);
		$('#attr_info').val($('#attr_info').val() + str);


		// 删除产品自定义配置
		$('.badge').on('click',function(){
			$(this).parent('li.list-group-item').remove();
			var aBadge = document.querySelectorAll(".badge");
			var str = '';
			for(var i=0;i<aBadge.length;i++){
				str += aBadge[i].getAttribute("data-param");
			}
			$('#attr_info').val(str)
		});
	});

	$('#addForm').on('submit',function(){
		var params = $('#addForm').serialize();
		$.post('productAdd',params,function(res){
			if(res.code == 1){
				layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    window.location.href = '{:url("product/index")}';
                });
			}else{
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});
});
function getTree(){
        layui.use(['tree', 'layer'], function(){
            var layer = layui.layer;

            $.getJSON("{:url('product/schoolNoCurriculum')}", function(res){
                if(111 == res.code){
                    window.location.reload();
                }
                layui.tree({
                    elem: '#tree'
                    ,nodes: res.data
                    ,click: function(node){
                        nowNode = node;
                        if(node.pid != 0){
                        	$('.major').val(node.name);
                        	$('.major_id').val(node.id);
                        	for(var i=0;i<res.data.length;i++){
                        		if(node.pid == res.data[i].id){
                        			$('.school').val(res.data[i].name);
                        			$('.school_id').val(res.data[i].id);
                        		}
                        	}
                        	layer.close(selectSchoolBox);
                        }
                    }
                });
            });

            // $.getJSON("{:url('product/classify')}", function(res){
            //     layui.tree({
            //         elem: '#classifytree'
            //         ,nodes: res.data
            //         ,click: function(node){
            //             nowNode = node;
            //         	$('.selectClassify').val(node.name);
            //         	$('.c_id').val(node.id);
            //         	layer.close(selectclassifyBox);
            //         }
            //     });
            // });

            $.getJSON("{:url('product/attr')}",function(res){
            	var attrhtml = '';
				for(var i=0;i<res.data.length;i++){
					attrhtml += '<div class="layui-form-item">';
					attrhtml += '<label class="layui-form-label ';
					if(i<4){
						attrhtml+= " label-required ";
					}
					attrhtml+='attrName">'+ res.data[i].name +'</label>';
					attrhtml += '<div class="layui-input-inline"><select class="attrVal"><option value="">请选择</option>';
					for(var j=0;j<res.data[i].children.length;j++){
						attrhtml +='<option value="'+ res.data[i].id + '-' + res.data[i].children[j].id +'">'+ res.data[i].children[j].name +'</option>';
					}
					attrhtml += '</select></div></div>';
					$('#attrbox').html(attrhtml);
					var form = layui.form;
					form.render();
				}
            })
        });
    }
</script>
{/block}
